/**
 * 用户管理页面
 * 功能：用户信息的增删改查、搜索筛选、状态管理
 * 作者：系统管理员
 * 创建时间：2024
 */

import React, { useState, useEffect } from 'react';
import { 
  Table, 
  Button, 
  Input, 
  Space, 
  Modal, 
  Form, 
  message, 
  Popconfirm, 
  Avatar
} from 'antd';
import { 
  PlusOutlined, 
  SearchOutlined,
  UserOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import axios from 'axios';

// API基础URL
const API_BASE_URL = 'http://localhost:3000';

// API服务函数
const userApi = {
  // 获取所有用户
  getUsers: async () => {
    const response = await axios.get(`${API_BASE_URL}/api/users`);
    return response.data;
  },
  
  // 根据ID获取用户
  getUserById: async (id: string) => {
    const response = await axios.get(`${API_BASE_URL}/api/users/${id}`);
    return response.data;
  },
  
  // 添加用户
  addUser: async (userData: { username: string; password: string }) => {
    const response = await axios.post(`${API_BASE_URL}/api/users`, userData);
    return response.data;
  },
  
  // 更新用户
  updateUser: async (id: string, userData: { username: string; password: string }) => {
    const response = await axios.put(`${API_BASE_URL}/api/users/${id}`, userData);
    return response.data;
  },
  
  // 删除用户
  deleteUser: async (id: string) => {
    const response = await axios.delete(`${API_BASE_URL}/api/users/${id}`);
    return response.data;
  }
};

/**
 * 用户信息接口定义
 * 定义了用户实体的数据结构，匹配Koa服务器数据结构
 */
interface User {
  id: number;                    // 用户唯一标识
  username: string;              // 用户名
  password?: string;             // 密码（可选，用于表单）
}

/**
 * 用户管理主组件
 * 负责用户数据的展示、搜索、增删改查等操作
 */
const User: React.FC = () => {
  // ==================== 状态管理 ====================
  
  /**
   * 用户数据列表
   * 存储所有用户信息，从API获取
   */
  const [users, setUsers] = useState<User[]>([]);
  
  /**
   * 加载状态
   * 控制数据加载时的loading状态
   */
  const [loading, setLoading] = useState(false);

  /**
   * 模态框显示状态
   * 控制新增/编辑用户弹窗的显示与隐藏
   */
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  /**
   * 当前编辑的用户信息
   * 编辑模式时存储被编辑的用户数据，新增模式时为null
   */
  const [editingUser, setEditingUser] = useState<User | null>(null);
  
  /**
   * 表单实例
   * 用于表单验证、重置、设置值等操作
   */
  const [form] = Form.useForm();
  
  /**
   * 搜索关键词
   * 用于按用户名、真实姓名、手机号进行模糊搜索
   */
  const [searchText, setSearchText] = useState('');
  

  // ==================== 数据获取 ====================
  
  /**
   * 从API获取用户数据
   */
  const fetchUsers = async () => {
    try {
      setLoading(true);
      const data = await userApi.getUsers();
      setUsers(data);
    } catch (error) {
      console.error('获取用户数据失败:', error);
      message.error('获取用户数据失败');
    } finally {
      setLoading(false);
    }
  };

  /**
   * 组件挂载时获取用户数据
   */
  useEffect(() => {
    fetchUsers();
  }, []);

  // ==================== 表格配置 ====================
  
  /**
   * 表格列配置
   * 定义用户列表表格的列结构、渲染方式等
   */
  const columns: ColumnsType<User> = [
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'avatar',
      width: 70,
      render: () => (
        <Avatar 
          icon={<UserOutlined />} 
          style={{ backgroundColor: '#ff7875' }}
        />
      ),
    },
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width: 150,
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_, record: User) => (
        <Space size="small">
          <Button 
            type="link" 
            size="small"
            onClick={() => handleEdit(record)}
            style={{ padding: 0 }}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定要删除这个用户吗？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button 
              type="link" 
              danger 
              size="small"
              style={{ padding: 0 }}
            >
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // ==================== 事件处理函数 ====================
  
  /**
   * 处理新增用户
   * 清空编辑用户信息，重置表单，显示模态框
   */
  const handleAdd = () => {
    setEditingUser(null);
    form.resetFields();
    setIsModalVisible(true);
  };

  /**
   * 处理编辑用户
   * 设置当前编辑用户，填充表单数据，显示模态框
   * @param user 要编辑的用户信息
   */
  const handleEdit = (user: User) => {
    setEditingUser(user);
    form.setFieldsValue(user);
    setIsModalVisible(true);
  };

  /**
   * 处理删除用户
   * 从API删除指定用户，显示成功提示
   * @param id 要删除的用户ID
   */
  const handleDelete = async (id: number) => {
    try {
      await userApi.deleteUser(id.toString());
      message.success('删除成功');
      fetchUsers(); // 重新获取数据
    } catch (error) {
      console.error('删除用户失败:', error);
      message.error('删除用户失败');
    }
  };

  /**
   * 处理模态框确认操作
   * 根据当前模式（新增/编辑）执行相应的用户操作
   */
  const handleModalOk = async () => {
    try {
      const values = await form.validateFields();
      if (editingUser) {
        // 编辑用户：更新现有用户信息
        await userApi.updateUser(editingUser.id.toString(), values);
        message.success('用户更新成功');
      } else {
        // 添加用户：创建新用户
        await userApi.addUser(values);
        message.success('用户添加成功');
      }
      setIsModalVisible(false);
      form.resetFields();
      fetchUsers(); // 重新获取数据
    } catch (error) {
      console.error('操作失败:', error);
      message.error('操作失败');
    }
  };

  /**
   * 处理模态框取消操作
   * 隐藏模态框并重置表单
   */
  const handleModalCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
  };

  /**
   * 处理搜索操作
   * 根据搜索条件筛选用户数据
   */
  const handleSearch = () => {
    // 搜索逻辑通过filteredUsers自动处理
    console.log('搜索:', { searchText });
  };

  /**
   * 处理重置搜索条件
   * 清空所有搜索筛选条件
   */
  const handleReset = () => {
    setSearchText('');
  };

  // ==================== 数据处理 ====================
  
  /**
   * 过滤后的用户数据
   * 根据搜索条件对用户数据进行过滤
   */
  const filteredUsers = users.filter(user => {
    // 搜索条件匹配：用户名
    const matchesSearch = !searchText || 
      user.username.toLowerCase().includes(searchText.toLowerCase());
    
    return matchesSearch;
  });

  // ==================== 渲染组件 ====================
  
  return (
    <div style={{ padding: "20px", height: "calc(100vh - 64px)", overflow: "hidden" }}>
      {/* 搜索筛选区域 */}
      <div
        style={{ 
          backgroundColor: "#fff",
          padding: "20px", 
          marginBottom: "20px",
          borderRadius: "4px"
        }}
      >
        {/* 搜索输入框 */}
        <Input
          placeholder="请输入用户名"
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          style={{ width: 200 }}
          suffix={<SearchOutlined />}
        />
        
        {/* 操作按钮组 */}
        <div style={{ marginLeft: "auto", display: "flex", gap: "8px" }}>
          <Button
            type="primary"
            onClick={handleSearch}
          >
            搜索
          </Button>
          <Button onClick={handleReset}>重置</Button>
        </div>
      </div>

      {/* 操作按钮区域 */}
      <div style={{ marginBottom: "24px", display: "flex" }}>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={handleAdd}
        >
          新增用户
        </Button>
      </div>

      {/* 用户列表表格 */}
      <Table
          columns={columns}
          dataSource={filteredUsers}
          rowKey="id"
          bordered
          loading={loading}
          pagination={{
            total: filteredUsers.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => 
              `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
            pageSizeOptions: ['10', '20', '50', '100'],
            size: 'default',
          }}
          scroll={{ x: 850, y: "calc(100vh - 500px)" }}
        />

      {/* 新增/编辑用户模态框 */}
      <Modal
        title={editingUser ? '编辑用户' : '新增用户'}
        open={isModalVisible}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
        width={600}
        destroyOnHidden
      >
        <Form
          form={form}
          layout="vertical"
        >
          {/* 用户名 */}
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          {/* 密码 */}
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder="请输入密码" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default User;